<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单 -->

    <!-- 
    表单域：容器
    form ：双标签 提交数据的方法和位置 
        action - url 接收并处理表单数据的服务器程序的url地址
        method - get/post 设置表单数据的提交方式
        name - 自定义名称 规定表单的名称

    提示文本：
    表单控件：
    -->

    <!-- 
    type:
        text 文本输入框
        password 密码输入框
        radio 单选框
        checkbox 复选框

        button 普通按钮
        reset 重置按钮
        submit 提交按钮
        image 图像形式的按钮

        file 定义输入字段和浏览按钮 供文件上传
        hidden 定义隐藏的输入字段

    name：自定义 定义控件的名称
    value：自定义 定义控件的默认文本值
    size：数字 定义空间的宽度
    checked：定义选框空间的默认被选中项
    maxlength：数字 定义允许输入的最多字符数
    -->
    

    <form action="data.php" method="get" name="first">
        <p>
            用户名：<input type="text" value=请输入您的用户名 name="" id="">
        </p>
        <p>
            密码：<input type="password">
        </p>
        <p>
            性别：
            <input type="radio" name="sex" checked="checked" id="male"><label for="male">男</label> 
            <input type="radio" name="sex" id="female"><label for="female">女</label>
        </p>
        <p>
            爱好：
            <label><input type="checkbox" name=“hobby”> 绘画</label>
            <input type="checkbox" name=“hobby”> 音乐
            <input type="checkbox" name=“hobby”> 代码
        </p>
        <!-- 单选复选都可以用checked属性进行默认选择 -->

         <p>
            <input type="button" value="普通按钮">
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
            <!-- <input type="image" src="images/btr.png"> -->
             <!-- 图标按钮 -->
         </p>

         <p>
            选择文件：
            <input type="file" multiple=“multiple”>
         </p>

         <!-- 文本域 -->
          <!-- rows表示文本框显示的最大行数 cols表示在出现滚动条后每一行显示的最大字节数-一个汉字按2字节算 -->
         自我介绍：
         <textarea name="" id="" cols="30" rows="5">请输入200字自我介绍</textarea>

         <!-- 下拉菜单 -->
          <!-- 
            select：选择 表示定义下拉菜单整体结构
            option 选项 表示定义下拉菜单的每一项
            双标签 文本级
            select>option  option可以有任意多项
            select>optgroup>option
         -->
         <p>
            城市：
            <select name="" id="">
                <optgroup label="国内">
                    <option value="">广州</option>
                    <option value="" selected="selected">北京</option>
                    <option value="">上海</option>
                    <option value="">深圳</option>
                </optgroup>
                <optgroup label="国外">
                    <option value="">伦敦</option>
                    <option value="">纽约</option>
                    <option value="">东京</option>
                    <option value="">首尔</option>
                </optgroup>
            </select>
         </p>

         <!-- 
            label标签的作用是帮表单元素定义标记
            使用label进行绑定后 当用户鼠标点击label内的提示内容时
            浏览器就会自动将焦点转到和标签相关的表单控件上
            方法一：eg. 性别
            1 给表单元素设置id属性
            2 将需要绑定的其他内容用label标签包裹
            3 给label标签赋予for属性 不用非要点radio的框 点男字或者女字也可以选择
            适用于离得比较远的绑定
            方法二：
            直接用label标签包裹 不用赋予for属性 适用于离得比较近的
         -->

        </form>

    
</body>
</html>